<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background: black;
			}
			#box {
				width: 200px;
				height: 200px;
				perspective:100000px;
				perspective-origin:-100px -30000px ;
				margin: 300px auto;
				transform-style: preserve-3d;
				animation: run 30s infinite linear;
			}
			#box>div{
				position: absolute;
				width: 200px;
				height:200px;
				background: deeppink;
				line-height: 100px;
				color: #fff;
				font-size: 30px;
				text-align: center;
				line-height: 100px;
				font-weight: bold;
				border-radius: 10px;
				border: 5px solid deeppink;
				opacity: .8;
			}
			#box>div img{
				width: 100%;
				height: 100%;
			}
			
			.item1 {
				transform: rotatey(0deg) translatez(400px);
			}
			
			.item2{
				transform: rotatey(30deg) translatez(400px);
			}
			.item3{
				transform: rotatey(60deg) translatez(400px);
			}
			.item4{
				transform: rotatey(90deg) translatez(400px);
			}
			.item5{
				transform: rotatey(120deg) translatez(400px);
			}
			.item6{
				transform: rotatey(150deg) translatez(400px);
			}
			.item7{
				transform: rotatey(180deg) translatez(400px);
			}
			.item8{
				transform: rotatey(210deg) translatez(400px);
			}
			.item9{
				transform: rotatey(240deg) translatez(400px);
			}
			.item10{
				transform: rotatey(270deg) translatez(400px);
			}
			.item11{
				transform: rotatey(300deg) translatez(400px);
			}
			.item12{
				transform: rotatey(330deg) translatez(400px);
			}
			.item13{
				width: 100px !important;
				height: 100px !important;
				transform: rotatey(0deg) translatey(-300px) translatex(200px); 
				border-radius: 50%;
			}
			.item14{
				width: 100px !important;
				height: 100px !important;
				transform: rotatey(0deg) translatey(-300px) translatex(-200px); 
				border-radius: 50%;
			}
			#box .item15{
				width: 100px !important;
				height: 100px !important;
				background: red;
				transform-style:flat !important;
				transform: rotate(45deg)  translatex(-50px) translatey(-100px); 
				border: none;
				box-shadow: -2px 2px 20px 5px red;
				margin-left: 20px;	
						
			}
			
				
			#box .item15:before{
				display: block;
				content: '我';
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				left:-60px;
				border-radius: 50%;
				box-shadow: 2px -2px 20px 5px red;
				text-align: center;
				
			}
			.item15::after{
				position: absolute;
				display: block;
				content: '爱';
				width: 100px;
				height: 100px;
				background: red;
				top: -50px;
				border-radius: 50%;
				box-shadow: 2px 2px 20px 5px red;
			    text-align: center;
			}
			.item16{
				width: 275px !important;
				height: 50px !important;
				transform:translatex(-88px)   translatey(-260px); 
				text-align: center;
				line-height: 50px;
				border-radius: 10px;
				}
			
			@keyframes run {
				from {
					transform: rotate3d(0,5,0,0deg);
				}
				to {
					transform-origin: center center;
					transform: rotate3d(0,1,0,360deg);
				}
			}
		</style>
	</head>

	<body>
		<div id="box">
			<div class="item1 a" >
				<img src="./img/1.jpg" />
			</div>
			<div class="item2 a">
				<img src="./img/2.jpg" />
			</div>
			<div class="item3 a">
				<img src="./img/3.jpg" />
			</div>
			<div class="item4 a">
				<img src="./img/4.jpg" />
			</div>
			<div class="item5 a">
				<img src="./img/5.jpg" />
			</div>
			<div class="item6 a">
				<img src="./img/6.jpg" />
			</div>
			<div class="item7 a">
				<img src="./img/7.jpg" />
			</div>
			<div class="item8 a">
				<img src="./img/8.jpg" />
			</div>
			<div class="item9 a">
				<img src="./img/9.jpg" />
			</div>
			<div class="item10 a">
				<img src="./img/10.jpg" />
			</div>
			<div class="item11 a">
				<img src="./img/11.jpg" />
			</div>
			<div class="item12 a">
				<img src="./img/12.jpg" />
			</div>
			<div class="item13 a">
				<img src="./img/13.jpg" style="border-radius: 50%;"/>
				<div class="love" style="width: 50px;overflow: hidden; background: hotpink;margin: -20px  auto 0px;">
					你若不离弃,
				</div>
			</div>
			<div class="item14 a">
				<img src="./img/13.jpg" style="border-radius: 50%;"/>
				<div class="love" style="width: 50px; background: hotpink;margin:-20px auto 0px;">我必生死相依</div>
			</div>
			<div class="item15 a" >
	              <span style="position:absolute;right:5px;bottom:-22px;">你</span> 
				</div>
			<div class="item16 a" >
	                       <span style="position: absolute;top:-30px ;left: 100px;">李红才</span>
			</div>
			
		</div>
		
		
	</body>

</html>